<template>
    <div class="address">
        <div v-for="(item,index) in list" :key="index" class="address-item">
            <div class="close-icon">
                <van-icon class="icon" name="cross" @click="removeItem(item,index)" />
            </div>
            <div class="address-item-top" @click="selectAddress(item,index)">
                <van-image class="address-icon" :src="require('../../assets/image/weizhi.png')"></van-image>
                <div class="address-item-top-left">
                    <div class="address-info">
                        <div class="name">{{item.addrName}}</div>
                        <div class="phone">{{item.addrMobile}}</div>
                    </div>
                    <div class="address">{{item.addrDetail}}</div>
                </div>
            </div>
            <div class="default-address">
                <div class="default" @click="selectedItem(item,index)">
                    <van-image v-if="item.addrInUse == 1" class="default-icon" :src="require('../../assets/image/gouxuan.png')"></van-image>
                    <van-image v-else class="default-icon" :src="require('../../assets/image/yuan.png')"></van-image>
                    <div class="weizhi">默认地址</div>
                </div>
                <div class="edit" @click="showPopup(item,index)">
                    <van-icon class="icon" name="edit" />
                    修改
                </div>
            </div>
        </div>
        <div class="add-btn">
            <van-button type="primary" block @click="showPopup">添加新收货地址</van-button>
        </div>

        <van-popup v-model="show" class="add-address-popup">
            <div class="add-address-box">
                <div class="add-address-title">添加地址</div>
                <div class="add-address-close">
                    <van-icon class="icon" name="cross" @click="onClose" />
                </div>
                <div class="field-box">
                    <div class="name">收件人姓名</div>
                    <van-field
                        class="input"
                        v-model="form.addrName"
                        name="收件人姓名"
                        placeholder="收件人姓名"
                        :rules="[{ required: true, message: '请填写收件人姓名' }]"
                    />
                    <div class="name">手机号码</div>
                    <van-field
                        class="input"
                        v-model="form.addrMobile"
                        name="手机号码"
                        placeholder="手机号码"
                        :rules="[{ required: true, message: '请填写手机号码' }]"
                    />
                    <div class="name">收货地址</div>
                    <van-field
                        class="input"
                        v-model="form.addrDetail"
                        type="textarea"
                        name="收货地址"
                        placeholder="收货地址"
                        :rules="[{ required: true, message: '请填写收货地址' }]"
                    />
                </div>
                <van-button class="popup-btn" type="primary" @click="confirm" block>保存</van-button>
            </div>
        </van-popup>
    </div>
</template>

<script>
    
export default {
    name: '',
    props: {
    },
    
    data () {
        return {
            show: false,
            username: '',
            phone: '',
            address: '',
            form:{
                addrDetail: '',
                addrMobile: '',
                addrName: '',
            },
            list:[]
        }
    },
    created(){
        this.init();
    },
    mounted() {
 
    },
    methods: {
        init(){
            this.$api.get(this.$url.address.address).then(res=>{
                if(res.code == 'SUCCESS'){
                    this.list = res.data.content;
                }else{
                    
                }
            })
        },
        selectAddress(item,index){
            this.$store.commit('setAddressForm',item);
            this.$router.push({path:'/orderDetail',query:{id:item.id}})
        },
        removeItem(item,index){
            // this.list.splice(index,1);
            this.$dialog.confirm({
                message:'确定删除？',
                confirmButtonText:'确定',
                showCancelButton:true,
                cancelButtonText:'取消',
                confirmButtonColor:'#bf1c16',
            }).then((res)=>{
                if(res){
                    this.$api.delete(this.$url.address.address, {
                        addrID: item.addrID
                    })
                    .then(res => {
                        if (res.code == "SUCCESS") {
                            this.list.splice(index,1);
                        }
                    }).catch(error => {
                        this.error = true;
                    });
                }
            }).catch((res) => {
                
            });

        },
        selectedItem(item,index){
            this.$api.put(this.$url.address.inused, {
                addrID: item.addrID
            })
            .then(res => {
                if (res.code == "SUCCESS") {
                    this.list.forEach((item,index)=>{
                        item.isDefault = false;
                    })
                    item.isDefault = true;
                    this.$toast('设置成功');
                    this.init();
                }
            }).catch(error => {
                this.error = true;
            });
        },
        showPopup(item,index){
            console.log('item,index: ',item.addrID,index)
            if(item.addrID){
                this.form = item;
            } else {
                this.form = {
                    addrDetail: '',
                    addrMobile: '',
                    addrName: '',
                }
            }
            this.show = true;
            console.log('showPopup: ',this.show)
        },
        onClose(){
            this.show = false;
        },
        confirm(){
            
            if(this.form.addrName == ''){
                this.$toast('请填写收件人姓名');
                return;
            }
            if(this.form.addrMobile == ''){
                this.$toast('请填写手机号码');
                return;
            }
            if(this.form.addrDetail == ''){
                this.$toast('请填写收货地址');
                return;
            }
            if(this.form.addrID){//编辑
                this.$api.put(this.$url.address.address,this.form).then(res=>{
                    console.log('home...res:',res)
                    if(res.code == 'SUCCESS'){
                        this.show = false;
                        this.init();
                    }
                })
            } else {//新增
                this.$api.post(this.$url.address.address,this.form).then(res=>{
                    console.log('home...res:',res)
                    if(res.code == 'SUCCESS'){
                        this.show = false;
                        this.init();
                    }
                })
            }
            
        }
    },
}
</script>
 
<style scoped lang='scss'>
@import "@/assets/css/variable.scss";

.address-item{
    padding: 0 .3rem;
    background: #fff;
    margin-bottom: .2rem;
    .close-icon{
        text-align: right;
        padding-top:.22rem;
        font-size: .3rem;
    }
    .address-item-top{
        display: flex;
        
        padding-bottom: .37rem;
        .address-icon{
            width: .36rem;
            height: .36rem;
            margin-right: .17rem;
            
        }
        
        .address-info{
            display: flex;
            .name{margin-right: .22rem;}
        }
        .address{
            margin-top: .22rem;
            color: #646464;
        }
    }

    .default-address{
        border-top: 1px solid #eaeaea;
        margin-left: .54rem;
        height: .8rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .default{
            display: flex;
            align-items: center;
            justify-content: center;
            .default-icon{
                width: .3rem;
                height: .3rem;
                margin-right: .17rem;
            }
            .weizhi{
                font-size: .24rem;
                color: #646464;
            }
        }
        .edit{
            font-size: .24rem;
            color: #646464;
            display: flex;
            align-items: center;
            .icon{
                margin-right: .17rem;
                font-size: .28rem;
            }
        }
    }
}
.add-btn{
    padding: .7rem;
    
}
.add-address-popup{border-radius: 10px;}
.add-address-box{
    width: 6.2rem;
    min-height: 8rem;
    padding: 0 .6rem;
    position:relative;
    
    .add-address-title{
        padding-top: .5rem;
        text-align: center;
        font-size: .3rem;
    }
    .add-address-close{
        font-size: .3rem;
        position: absolute;
        top: .2rem;
        right: .2rem;
    }
    .field-box{
        margin-top: .5rem;
        .name{
            font-size: .28rem;
            margin-top: .24rem;

        }
        .input{
            margin-top: .12rem;
            border: 1px solid #D6D7DC;
        }
    }
    .popup-btn{
        margin-top: .35rem;
    }
}
</style>
